import { Button } from 'antd'
import Count from './Count'
import { useSelector, useDispatch } from 'react-redux'
import { voteAction } from '@/store/redux-saga/actions'
import {
	SagaViewWrapper,
	TitleWrapper,
	VoteInfoWrapper,
	ButtonGroup
} from './style'

function SagaViews () {
	const sup = useSelector(state => state.vote.sup)
	const opp = useSelector(state => state.vote.opp)
	const count = useSelector(state => state.count.count)
	const dispatch = useDispatch()
	return (
		<SagaViewWrapper>
			<TitleWrapper>
				<h2>React比Vue难吗？<span>{count}</span></h2>
			</TitleWrapper>
			<VoteInfoWrapper>
				<p>支持：{sup}人</p>
				<p>反对：{opp}人</p>
			</VoteInfoWrapper>
			<ButtonGroup>
				<Button type='primary' onClick={() => dispatch(voteAction.voteSup())}>支持</Button>
				<Button type='primary' onClick={() => dispatch(voteAction.voteOpp())}>反对</Button>
				<Button onClick={() => dispatch(voteAction.asyncVoteSup())}>异步支持</Button>
				<Button onClick={() => dispatch(voteAction.asyncVoteOpp())}>异步反对</Button>
			</ButtonGroup>
			<Count />
		</SagaViewWrapper>
	)
}
export default SagaViews
